<template>
  <view class="page-body" :style="[pageStyle]">
    <image class="page-body-img" :style="[imgStyle]" :src="imgSrc" mode="aspectFill"></image>
    <view class="page-body-slot" :style="[slotStyle]">
      <slot></slot>
    </view>
  </view>
</template>

<script>
  import {
    mapState,
    mapMutations
  } from 'vuex'
  export default {
    props: {
      bgImg: {
        type: String,
        default: '/static/images/kaluolin/bg.png'
      },
      backgroundColor: {
        type: String,
        default: '#f1f1f1'
      },
      safeAreaLeft: {
        type: Boolean,
        default: false
      },
    },
    data() {
      return {
        safeArea: {},
        pageStyle: {},
        imgStyle: {},
        slotStyle: {}
      }
    },
    computed: {
      ...mapState({
        sysInfo: state => state.global.systemInfo
      }),
      imgSrc () {
        return this.bgImg || '/static/images/kaluolin/bg.png'
      }
    },
    watch: {
      sysInfo (e) {
        this.init()
      },
    },
    mounted() {
      this.init()
    },
    methods: {
      init () {
        let {
          screenHeight,
          screenWidth,
          safeArea,
          statusBarHeight
        } = this.sysInfo
        this.safeArea = safeArea
        this.pageStyle = {
          width: screenWidth + 'px',
          height: screenHeight + 'px',
          backgroundColor: this.backgroundColor,
          // paddingLeft: safeArea.left + 'px',
          // paddingBottom: screenHeight + 'px'
        }
        if (this.safeAreaLeft) {
          this.pageStyle.paddingLeft = ('0' || safeArea.left || statusBarHeight) + 'px'
        }
        this.imgStyle = {
          width: screenWidth + 'px',
          height: screenHeight + 'px',
        }
        this.slotStyle = {
          width: screenWidth + 'px',
          height: safeArea.bottom + 'px',
        }
        if (this.safeAreaLeft) {
          this.slotStyle.paddingLeft = ('0' || safeArea.left || statusBarHeight) + 'px'
          this.slotStyle.width = screenWidth - ('0' || safeArea.left || statusBarHeight) + 'px'
        }
      }
    }
  };
</script>

<style lang="scss" scoped>
  .page-body {
    // #ifndef APP-NVUE
    box-sizing: border-box;
    //#endif
    position: relative;
    overflow: hidden;
    background-color: #F1F1F1;
    &-img {
      position: absolute;
      top: 0;
      left: 0;
      z-index: 2;
    }

    &-slot {
      position: absolute;
      top: 0;
      left: 0;
      z-index: 3;
    }
  }
</style>
